<template>
	<view class="content">
		<view class="top">
			<view class="form_wrapper">
				<rForm ref="formRef" v-model="info" :rules="rule">
					<rFormItem label="头像" prop="avatarUrl">
						<view class="avatarbox" @click="changeAvatar">
							<image class="avatarUrl" :src="ASSETS_URL + info.avatarUrl" mode=""></image>
						</view>
					</rFormItem>
					<rFormItem label="姓名" prop="nickName">
						<input type="text" class="_form_item_input" v-model="info.nickName" placeholder="请输入姓名" />
					</rFormItem>
					<rFormItem label="联系方式" prop="phone">
						<input type="digit" class="_form_item_input" v-model="info.phone" placeholder="请输入联系方式" />
					</rFormItem>
					<rFormItem label="身份证" prop="idCard">
						<input type="digit" class="_form_item_input" v-model="info.idCard" placeholder="请输入联系方式" />
					</rFormItem>
					<rFormItem label="工作单位" prop="unit">
						<input type="text" class="_form_item_input" v-model="info.unit" placeholder="请输入联系方式" />
					</rFormItem>
				</rForm>
			</view>
		</view>
		<image src="../../static/images/save.png" mode="" @click="handleClick"></image>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import rForm from '@/components/r-from.vue'
	import rFormItem from '@/components/r-form-item.vue'
import { chooseAndUploadFIle } from '../../api/common';
import { getUserById, updateUser } from '../../api/user';
import { ASSETS_URL } from '../../uitls/global';
	const formRef = ref(null);
	const rule = {
		avatarUrl:{
			type:'text',
			msg:'请选择头像'
		},
		nickName:{
			type:'name',
			msg:"请输入合法的用户名"
		},
		phone:{
			type:'phone',
			msg:"请输入合法的电话号码"
		},
		idCard:{
			type:'idCard',
			msg:"请输入合法的身份证号"
		},
		unit:{
			type:'text',
			msg:"请输入合法的工作单位"
		}
	}
	const info = ref({
		avatarUrl: null,
		nickName:"",
		phone:"",
		idCard:"",
		unit:''
	})
	//切换头像
	function changeAvatar(){
		chooseAndUploadFIle((res)=>{
			uni.showToast({
				title:"选择成功！"
			});
			console.log(res);
			info.value.avatarUrl = res
		})
	}
	//保存
	async function handleClick(){
		const vaild = formRef.value.validate();
		if(!vaild) return;
		const {data} = await updateUser(info.value);
		uni.showToast({
			title:'保存成功!'
		})
		setTimeout(()=>{
			uni.navigateBack();
		},1500)
	}
	onMounted(async()=>{
		const {data} = await getUserById();
		info.value = data;
	})
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		align-items: center;
		padding: 30px;
		flex-direction: column;
		height: 85vh;
		justify-content: space-between;
	}
	
	.top {
		width: 100%;
	}

	.avatarbox {
		display: flex;
		flex-direction: column;
		width: 200rpx;
		height: 200rpx;
		border-radius: 20rpx;
		gap: 10px;
		margin-bottom: 10px;
		background-color: $r-input_bgc;
		overflow: hidden;

		image {
			width: 100%;
			height: 100%;
		}

	}

	.form_wrapper {
		width: 100%;
	}

	image {
		width: 80%;
		height: 50px;
	}
</style>